<template lang="pug">
.dashboard-chart
  h6.chart-title {{chartTitle}}
  //- DoubleLineChart.line(
  //-   v-if="target==='pressureFlux'"
  //-   :doubleSeries="doubleSeries"
  //-   :doubleXAxis="doubleXAxis")
  PressureFluxChart(
    v-if="target==='pressureFlux'"
    v-bind="$props"
    @highLightTable="highLightTable")
  WaterQuantityChart(
    v-else-if="target==='waterQuantity'"
    v-bind="$props")
  WaterQualityChart(
    v-else-if="waterQuality.includes(target)"
    v-bind="$props")
  DefaultChart(
    v-else
    v-bind="$props")
    //- PieChart.pie(
    //-   v-if="deviceName==='WQTM'"
    //-   :doubleSeries="pieSeries"
    //-   :doubleXAxis="pieXAxis")
</template>

<script >
/**
 * @name Dashboard 历史数据页面
 * @author 陈可嘉
 * @description 各种指标历史数据的展示
 * @update linmn
 * @description 点击坐标跳转到历史数据页面
 */
import DoubleLineChart from '../../../../components/Charts/DoubleLineChart'
import LineBarChart from '../../../../components/Charts/LineBarChart'
import DefaultChart from './DefaultChart'
import PressureFluxChart from './PressureFluxChart'
import WaterQuantityChart from './WaterQuantityChart'
import WaterQualityChart from './WaterQualityChart'
export default {
  name: 'DashboardChart',
  components: {
    DoubleLineChart,
    LineBarChart,
    DefaultChart,
    PressureFluxChart,
    WaterQuantityChart,
    WaterQualityChart
  },
  props: {
    target: String,
    parameterList: Array,
    devicesData: Array,
    interval: String
  },
  watch: {
    devicesData: {
      handler (data) {
        if (this.target === 'waterQuantity') {
        }
      },
      deep: true
    }
  },
  computed: {
    chartTitle () {
      if (this.devicesData.length > 1) {
        return '多设备对比'
      }
      if (this.devicesData.length === 0) {
        return '-'
      }
      const userName = this.devicesData[0].userName || this.devicesData[0].siteName || '-'
      const userCode = this.devicesData[0].userCode || this.devicesData[0].siteCode || '-'
      return `${userName}(${userCode})`
    }
  },
  data () {
    return {
      waterQuality: [
        'residualChlorine',
        'turbidity',
        'ph',
        'ambientTemp',
        'waterTemp',
        'orp',
        'conductivity'
      ]
    }
  },
  methods: {
    highLightTable (data) {
      this.$emit('highLightTable', data)
    }
  }
}
</script>

<style lang="sass" scoped>
.dashboard-chart
  height: 100%
  display: flex
  flex-direction: column
  overflow: hidden
  .chart-title
    text-align: center
    padding-top: 10px
    margin-bottom: 0
    font-weight: bold
</style>
